<template>
  <span style="font-size: 25px;font-weight: bolder;">用户登陆</span>
  <br>
  <br>
  <div style="width: 100%;align-items: center;justify-items: center;">
    <el-form :model="form" label-width="auto" style="max-width: 600px;">
      <el-form-item label="账号：">
        <el-input v-model="form.username" placeholder="请输入账号">
          <template #prefix>
            <el-icon><User /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="密码：">
        <el-input v-model="form.password" type="password" placeholder="请输入密码">
          <template #prefix>
            <el-icon><Lock /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <div v-if="num!=0&&num<=5" style="color: red;font-size: 10px;">您已输错密码{{num}}次，超过五次将封禁账号！</div>
      <div v-if="num>5" style="color: red;font-size: 10px;">您已多次输错密码，账户已封禁</div>
      <div>
      <el-switch v-model="value1" /> <span style="font-size: 12px;">&nbsp;&nbsp;&nbsp;我已阅读并明确<a>《软件开源协议》</a>和<a>《用户隐私协议》</a></span>
      </div>
    </el-form>
    <el-button :disabled="isDisabled" type="primary" style="display: flex; justify-content: center; align-items: center;" @click="submits">登陆</el-button>
    <br>
    <RouterLink to="/regist">还没有账户？去注册-></RouterLink>
  </div>
  
  </template>
  
  <script lang="ts" setup>
    import { onMounted, ref, watchEffect } from 'vue';
    import { ElMessage } from 'element-plus'
    import { userLogin } from '@/api/user/Login';
    import router from '@/router/router';
    import { UserNameStore } from '@/Store/UserNameStore';
  import { UserStore } from '@/Store/UserStore';
  import { ServiceAutoLogin } from '@/api/user/AutoLogin';
  import Cookie from 'js-cookie'

    onMounted(()=>{
        document.title = "用户登录"
        AutoLogin()
    })

     //自动登陆模块
     async function AutoLogin(){
      console.log("自动登陆模块执行！")
      await ServiceAutoLogin()
      .then(res=>{
        console.log(res.data)
        if(res.data.code === 1){
          ElMessage({
          message: '触发自动登陆',
          type: 'success',
        })
          router.push('/Student')
        }
      })
      .catch(err=>{
        console.log(err.message)
      })
    }
  

    const form  = ref({
      username:'',
      password:''
    })
    const num = ref(0);
    const value1 = ref(false)
    const isDisabled = ref(false)


    async function submits(){
      if(!value1.value){
        ElMessage({
          message: '请阅读并确认协议！',
          type: 'warning',
        })
      }
      else{
        let data = form.value
        await userLogin(data)
        .then(res=>{
          console.log(res.data.code)
          if(res.status===200&&res.data.code===1){
            router.push('/Student');
            //console.log(res.data.data.token)
            ElMessage({
              message: '登陆成功！',
              type: 'success',
            })
            UserStore().setname(res.data.data.token)
            UserNameStore().setname(res.data.data.name)
            Cookie.set('token',res.data.data.token,{expires:12,path:'/'})//放入Cookie
            Cookie.set('name',res.data.data.name,{expires:12,path:'/'})//放入Cookie
            console.log("写入pinia"+res.data.data.name)
          }
          else if(res.status===200&&res.data.code===0){
            ElMessage({
              message: "账号或密码错误",
              type: 'warning',
            })
            num.value++;
          }
        })
        .catch(err=>{
          console.log(err.message)
          ElMessage.error(err.message)
        })
      }

      //监视器
      watchEffect(()=>{
        if(num.value>5){
          ElMessage.error('账户已封禁，请联系管理员')
          isDisabled.value = true
        }
      })

    }
  </script>
  